<template>
	<view>
		<u-navbar title="分享表单">
		</u-navbar>
		<view class="u-text-center qrcode-view u-m-t-40">
			<!--			<view class="u-flex  u-row-center">-->
			<!--				<image :src="qrcode"></image>-->
			<!--				&lt;!&ndash; <uqrcode ref="uQRCode" :text="linkUrl" v-if="linkUrl"/> &ndash;&gt;-->
			<!--			</view>-->
			<!--			<view class="u-m-t-40">-->
			<!--				<text class="u-font-13">-->
			<!--					{{ linkUrl }}-->
			<!--				</text>-->
			<!--			</view>-->
			<image :src="`data:image/png;base64,${qrcode}`"></image>
		</view>
		<view class="u-p-10">
			<u-button type="primary" text="分享给朋友" open-type="share">
				<u-icon name="weixin-fill"></u-icon>
				分享给朋友
			</u-button>
		</view>
		<view class="share-other-view">
			<u-grid :border="false">
				<u-grid-item @click="save">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="download" :size="45"></u-icon>
					<text class="grid-text">保存二维码</text>
				</u-grid-item>
				<u-grid-item @click="openLink">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="zhuanfa" :size="45"></u-icon>
					<text class="grid-text">直接打开</text>
				</u-grid-item>
				<u-grid-item @click="copyLink">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="attach" :size="45"></u-icon>
					<text class="grid-text">复制链接</text>
				</u-grid-item>
			</u-grid>
		</view>

	</view>
</template>

<script>
import {saveAlbum} from "../../utils";

export default {
	data() {
		return {
			linkUrl: '',
			qrcode: '',
			formKey: '',
		};
	},
	onLoad(options) {
		this.linkUrl = this.$u.api.getWebBaseUrl() + '/s/' + options.formKey
		this.$u.api.form.getFormShareQrcode(options.formKey).then(data => {
			this.qrcode = data;
		})
		this.formKey = options.formKey
		uni.$u.mpShare.title = '分享表单';
		uni.$u.mpShare.path = '/pages/form/write/index?formKey=' + options.formKey
	},
	methods: {
		save() {
			saveAlbum(this.qrcode)
		},
		openLink() {
			uni.navigateTo({
				url: '/pages/form/write/index?formKey=' + this.formKey
			})
		},
		copyLink() {
			let link = this.linkUrl
			uni.setClipboardData({
				data: link,
				success: function () {
					console.log('success');
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.qrcode-view {
	height: 50vh;

	image {
		height: 280px;
		width: 290px;
	}
}

.share-other-view {
	position: fixed;
	bottom: 50rpx;
	width: 100vw;
}
</style>
